<template>
  <div>
    <el-container>
      <div id="aside">
        <div class="sys-name">
          <h3 style="margin-top: 0px">养机管理系统</h3>
        </div>
        <el-menu
          id="menu"
          :default-active="$route.path"
          mode="vertical"
          class="el-menu-vertical-demo"
          text-color="#000000FF"
          :router="true"
          >
         <MenuContent :menus="menuList"></MenuContent>
        </el-menu>
      </div>
      <el-main>
        <el-row id="top-info">
<!--          <div id="top-left">-->
<!--            <i v-if="isCollapse" class="el-icon-s-unfold" id="icon" @click="controlAside"></i>-->
<!--            <i v-else class="el-icon-s-fold" id="icon" @click="controlAside"></i>-->
<!--          </div>-->
          <div id="top-right">
              <span style="padding-right: 5px; line-height: 35px; font-size: 14px;">你好，<strong>{{userInfo.nickName ? userInfo.nickName : userInfo.username}}</strong></span>
            <el-dropdown @command="handleCommand">
              <el-avatar id="avatar" :size="35" :src="userInfo.avatar"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="editUser">修改个人信息</el-dropdown-item>
                <el-dropdown-item command="resetPwd">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-row>
        <el-dialog width="20%" title="修改密码" :visible.sync="resetPwdFormVisible" :destroy-on-close="true" :append-to-body="true" :close-on-click-modal="false">
          <el-form :model="resetPwdForm" :rules="pwdRules" ref="pwdRules">
            <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldPwd">
              <el-input type="password" show-password  v-model="resetPwdForm.oldPwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPwd">
              <el-input type="password" show-password v-model="resetPwdForm.newPwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" :label-width="formLabelWidth" prop="confirmPwd">
              <el-input type="password" show-password v-model="resetPwdForm.confirmPwd" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeResetDialog">取 消</el-button>
            <el-button type="primary" @click="resetPwd">确 定</el-button>
          </div>
        </el-dialog>
        <Tabs></Tabs>
        <UserDialog></UserDialog>
      </el-main>

    </el-container>
  </div>
</template>

<script>
import Tabs from "@/components/TabC.vue";
import MenuContent from '@/components/MenuContent.vue';
import UserDialog from "@/components/dialog/UserSelfUpdateDialog";
import {resetPwd, getAuth} from '@/api/user';
import {logout} from '@/api/login';
export default {
    name: "IndexView",
    components: { Tabs, MenuContent, UserDialog },
    data() {
      return {
        // websocket 心跳定时器
        heartbeatInterval: null,
        // 用户个人信息
        userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
        // 菜单栏折叠
        isCollapse: false,
        // 重置密码表单
        resetPwdForm: {
          oldPwd: "",
          newPwd: "",
          confirmPwd: ""
        },
        resetPwdFormVisible: false,
        formLabelWidth: "60",
        pwdRules: {
          oldPwd: [
            { required: true, message: '请输入旧密码', trigger: 'blur' }
          ],
          newPwd: [
            { required: true, message: '请输入新密码', trigger: 'blur' }
          ],
          confirmPwd: [
            { required: true, message: '请填写确认新密码', trigger: 'blur' }
          ],
        }
      }
    },
    computed: {
      menuList: {
        get() {
          return JSON.parse(sessionStorage.getItem("permissions"));
        }
      }
    },
    methods: {
      resetPwd() {
        if (this.resetPwdForm.newPwd != this.resetPwdForm.confirmPwd) {
          this.$message.error("两次密码输入不一致")
          return;
        }
        resetPwd(this.resetPwdForm).then((res) => {
          this.resetPwdFormVisible = false;
          this.$message.success(res.data.msg);
          this.$router.push("/");
        })
      },
      closeResetDialog() {
        this.resetPwdFormVisible = false;
      },
      handleCommand(command) {
        if (command === "editUser") {
          this.$store.dispatch("user/editUserBySelf", this.userInfo.id)
        } else if (command === "resetPwd") {
          this.resetPwdFormVisible = true;
        } else if (command === "logout") {
          // 调用后端的退出
          logout().then((res) => {
            this.$message.success(res.data.msg)
            // 清空缓存
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("permissions");
            sessionStorage.removeItem("userInfo");
            sessionStorage.removeItem("doIt")

            this.$router.push("/");
          });

        }
      },
      changeMenu(item) {
        var params = {
          title: item.menuName,
          name: item.routerName
        }
        this.$store.commit("addTab", params)
      },
      senMsg(msg) {
        // 发送文本消息
        this.$websocket.send(msg);
      },
      // 发送心跳消息
      sendHeartbeat() {
        if (this.$websocket.readyState === WebSocket.OPEN) {
          // 发送心跳消息，可以是任意格式的字符串，用于表示心跳
          this.senMsg('ping');
        }
      },
      // 开始心跳定时器
      startHeartbeat() {
        this.heartbeatInterval = setInterval(() => {
          this.sendHeartbeat();
        }, 10000); // 每 10 秒发送一次心跳
      },
      // 停止心跳定时器
      stopHeartbeat() {
        clearInterval(this.heartbeatInterval);
      },
      initWebsocket() {
        // this.$websocket = new WebSocket('ws://127.0.0.1:8044/ws', [sessionStorage.getItem("token")])
        this.$websocket = new WebSocket('ws://127.0.0.1:8044/ws')
        // 监听 WebSocket 连接成功事件
        this.$websocket.onopen = event => {
          console.log('WebSocket 连接成功', event);
          let msg = {
            "token": sessionStorage.getItem("token")
          }
          // 发送身份认证
          this.senMsg(JSON.stringify(msg))
          // 设置心跳定时器，定期发送心跳消息
          this.startHeartbeat();
        };

        // 监听 WebSocket 接收消息事件
        this.$websocket.onmessage = event => {
          const message = event.data;
          console.log('接收到消息:', message);
        };

        // 监听 WebSocket 连接关闭事件
        this.$websocket.onclose = event => {
          console.log('WebSocket 连接关闭', event);
          // 清除心跳定时器
          this.stopHeartbeat();
        };
      },
      getAuth() {
        let params = {
          "username": this.userInfo.userName
        }
        getAuth(params).then(res => {
          if (res.data.code === 200) {
            this.$store.commit("dynamicRouters", res.data.data.menuPermissions);
            // 菜单权限
            sessionStorage.setItem("permissions", JSON.stringify(res.data.data.menuPermissions));
            // 按钮权限
            sessionStorage.setItem("button-permissions", JSON.stringify(res.data.data.buttonPermissions));
          }
        })
      },
    },
    mounted() {
      this.initWebsocket();
      this.getAuth();
    },
    beforeDestroy() {
      this.$websocket.close();
    },
}
</script>

<style scope>
.sys-name {
  width: 100%;
  text-align: center;
  background-color: #d6efe6;
  height: 60px;
  line-height: 60px;
}
.el-divider {
  margin-top: 2px !important;
}
#top-info {
  height: 40px;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
  display: flex;
  flex-direction: row;
}
#avatar {

}
#avatar:hover {
  cursor: pointer
}
.el-main {
  min-width: 900px;
  height: 100vh;
  padding: 5px 8px;
}
#icon {
  float: left;
  font-size: 25px;
}
#icon:hover {
  cursor: pointer;
}
.el-menu {
  border-right: none;
  text-align: left;
}
#aside {
  height: 100vh;
  min-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.el-header {
  height: 20px !important;
}
.el-divider {
  margin: 10px 0;
}
.el-tabs {
  padding-top: 0px !important;
  padding-bottom: 10px !important;
  border: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.el-footer {
  float: right;
  height: 45px !important;
  padding-top: 10px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
